<template>
    <div class="container">
        <img src="@/assets/user/img.png" alt="" />
        <div class="caih-login">
            <div class="caih-login-title">
                用户登录
                <span>LOGIN</span>
            </div>
            <div class="caih-login-content">
                <el-form ref="formRef" :model="form" :rules="rules">
                    <el-form-item>
                        <el-alert :closable="false" type="warning">用户名：admin，密码:123456</el-alert>
                    </el-form-item>
                    <el-form-item prop="account">
                        <el-input v-model="form.account" placeholder="请输入用户名" prefix-icon="el-icon-user" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            v-model="form.password"
                            show-password
                            placeholder="请输入密码"
                            prefix-icon="el-icon-lock"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="form.agreement">
                            登录即代表您同意平台
                            <span>服务协议</span>
                            和
                            <span>隐私策略</span>
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-login" type="primary" @click="handleLogin">登录</el-button>
                    </el-form-item>
                    <div class="operate">
                        <span @click="showTips">
                            立即注册
                            <el-icon><el-icon-right /></el-icon>
                        </span>
                        <i @click="showTips">找回密码</i>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, type FormInstance } from "element-plus";
import { useUserStore } from "@/stores/user";

const rules = {
    account: { required: true, message: "请输入用户名" },
    password: { required: true, message: "请输入密码" },
};

const router = useRouter();
const user = useUserStore();
const formRef = ref<FormInstance>();
const form = reactive({
    account: "",
    password: "",
    agreement: false,
});

const showTips = () => ElMessage.warning("请联系平台管理员！");

const handleLogin = async () => {
    try {
        await formRef.value!.validate();
        if (!form.agreement) return ElMessage.warning("请阅读并同意协议");
        console.log(form);
        const token = await user.login({ ...form });
        if (!token) return;

        router.replace("/");
    } catch (error) {
        console.log("handleLogin catch error.", error);
    }
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 1200px;
    margin: 155px auto 132px;
}
.caih-login {
    width: 416px;
    padding: 48px 43px;
    background: #fff;
    box-sizing: border-box;
    .caih-login-title {
        display: flex;
        align-items: center;
        height: 26px;
        font-size: 20px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 32px;
        span {
            margin-left: 8px;
            color: rgba(0, 0, 0, 0.25);
        }
    }
    .caih-login-content {
        span {
            color: var(--el-color-primary);
            cursor: pointer;
        }
        i {
            cursor: pointer;
        }
        .btn-login {
            width: 100%;
        }
        .operate {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 32px;
        }
    }
}
</style>
